<template>
  <!--存款记录-->
  <div class="cunkuanjilu">
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <wv-group
        v-infinite-scroll="getList"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <wv-tabs v-model="activeIndex" class="container" @click="getDataByIsCheck()">
          <wv-tab title="审核中">
            <ul v-for="(item,index) in depositList">
              <li @click="goDetail(item.depositId)">
                <p>{{item.amount}}元 <span>审核中</span></p>
                <p>上传时间：{{item.createDate}}</p>
              </li>
            </ul>
          </wv-tab>
          <wv-tab title="已通过">
            <ul v-for="(item,index) in depositList">
              <li @click="goDetail(item.depositId)">
                <p>{{item.amount}}元 <span>已通过</span></p>
                <p>上传时间：{{item.createDate}}</p>
              </li>
            </ul>
          </wv-tab>
          <wv-tab title="未通过">
            <ul v-for="(item,index) in depositList">
              <li @click="goDetail(item.depositId)">
                <p>{{item.amount}}元 <span>未通过</span></p>
                <p>上传时间：{{item.createDate}}</p>
              </li>
            </ul>
          </wv-tab>
        </wv-tabs>
      </wv-group>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {cunkuanjilu} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: '',
    props: {},
    data() {
      return {
        activeIndex: 0,
        depositList: [],
        wrapperHeight: 0,
        page: 1,
        rows: 10,
        loading: false,
        pages: 0,
        totalNum: 0
      };
    },
    methods: {
      getList() {
        let isCheck = this.activeIndex + 1;
        let params = {
          page: this.page,
          rows: this.rows,
          isCheck: isCheck
        };
        cunkuanjilu(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let data = res.object;
            let list = data.rows;
            let pages = data.pages;
            let page = data.page;
            this.page = page;
            this.pages = pages;
            let totalNum = data.totalNum;
            this.totalNum = totalNum;
            if (list.length > 0) {
              this.depositList = this.depositList.concat(list);
            }
            if (this.page < this.pages) {
              this.page++;
              this.loading = false
            } else {
              this.loading = true
            }
          } else {
            Toast.text(res.info);
          }
        })
      },
      getDataByIsCheck() {
        this.depositList = [];
        this.getList();
      },
      goDetail(depositId) {
        this.$router.push({path: 'weiguodetail', query: {'depositId': depositId}})
      }
    },
    created() {
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .cunkuanjilu {
    padding-top: 10px;
  }

  ul {
    text-align: left;
    padding: 10px;

    li {
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;

      p:first-child {
        font-size: 16px;
        color: #f98e3c;

        span {
          font-size: 14px;
          color: #999;
          margin-left: 10px;
        }
      }

      p:last-child {
        color: #999;
      }
    }

    .no {
      display: flex;

      div {
        flex: 1;

        p:first-child {
          span {
            color: #fb556a;
          }
        }
      }

      > p {
        padding-top: 18px;
      }
    }

    .guo p:first-child span {
      color: #f98e3c;
    }
  }
</style>
